<!doctype html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>home</title>
	<link rel="stylesheet" type="text/css" href="home.css"/>
	<link rel="icon" type="image/x-icon" href="img/ico.ico" />
	<!--<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />-->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</head>
<body>
	<!--头部-->
	<div class="header">
		<div class="container">
			<div class="header-left">
				<i></i>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Messages</a></li>
					<li><a href="#">Docs</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<!--主题-->
	
	<div class="main">
		<div class="container">
			<div class="txt1">
				<div class="txt-top">
					<img src="img/iceland.jpg"/>
					<div id="txt-top">
						<img src="img/avatar-dhg.png"/>
					</div>
					<h5>Dave Gamache</h5>
					<p>I wish i was little bit taller,wish i</p>
					<p> was a baller.</p>
				</div>
				<div class="txt-one">
					<h5>About</h5>
					<p>Went to<a href="#"> Oh,Canada</a></p>
					<p>Became friends with<a href=""> Obama</a></p>
					<p>Worked at<a href=""> Github</a></p>
					<p>Lives in<a href=""> San Francisco,CA</a></p>
					<p>Form<a href=""> Seattle,WA</a></p>
				</div>
				<div class="txt-bot">
					<h5>Photos</h5>
					<ul>
						<li><img src="img/instagram_5.jpg"/></li>
						<li><img src="img/instagram_6.jpg"/></li>
						<li><img src="img/instagram_7.jpg"/></li>
						<li><img src="img/instagram_8.jpg"/></li>
						<li><img src="img/instagram_9.jpg"/></li>
						<li><img src="img/instagram_10.jpg"/></li>
						
					</ul>
				</div>
			</div>
			
			
			<div class="txt2">
				<div class="txt2-top">
					<h5 class="h5-top">
						Dave Gamache
						<span>4 min</span>
					</h5>
					<p>Aenean lacinia bibendum nulla sed consectetut.Vestibulum id ligula porta felis</p>
					<p>euismod semper.Morbileo risus,porta ac consectetur ac,vestibulum at eros.Cras</p>
					<p>just odio,dapibus ac facilisis in,egestas eget quan.Vestibulum id ligula porta felis</p>
					<p>euismod smper.Cum sociis natoque penatibus et magnis dis parturient montes,</p>
					<p>nascetur ridiculus mus.</p>
					
					<ul>
					<li><img src="img/unsplash_2.jpg"/></li>
					<li><img src="img/instagram_1.jpg"/></li>
					<li><img src="img/instagram_13.jpg"/></li>
					<li><img src="img/unsplash_2.jpg"/></li>
				</ul>
					
					<p><a href="#">Jacon Thornton:</a>Donec id elit non mi porta gravida at eget metus.Vivamus sagittis</p>
					<p><a href="#"></a>lacuc vel augue laoreet rutrum faucibus dolor.Donec ullamcorper nulla non</p>
					<p><a href="#"></a>metus auctor fringilla.Praesent commodo cursus magna,vel scelerisque nisl</p>
					<p><a href="#"></a>consectertur et.Sed posuere consectetur est at lobrtis.</p>
					<p><a href="#">Mark Otto:</a>Lorem ipsum dolor sit amet,consertur adipiscing elit,Fusce dapibus,</p>
					<p><a href="#"></a>tells ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa</p>
					<p><a href="#"></a>justo sit amet risus.</p>
				</div>
				
				<div class="txt2-but">
					<h5 class="h5-top">
						Jacob Thornton
						<span>12 min</span>
					</h5>
					<p>Donec id elit non mi porta gravida at eget metus.Ineger posuere erat a ante</p>
					<p>venenatic dapibus posuere velit aliquet.Cum sociis natoque penatibus et magnis</p>
					<p>dis partutient montes,nascetur idiculus mus.Morbi leo risus,porta ac consectetur</p>
					<p>ac,vestibulum at eros.Lirem ipsum dolor sit amet,consectetur adipiscing elit.</p>
				</div>
				
				
				<div class="txt2-over">
					<h5 class="h5-top">
						Mark Otto
						<span class="min">34 min</span>
					</h5>
					<p>Donec ullamcorper nulla non metus auctor fringilla.Vestibulum id ligula porta felis</p>
					<p>euismod semper.Aenean eu leo quam.Pellentesque ornare sem lacinia quam</p>
					<p>venatis vestiblum.Etiam porta sem malesuade magna mollis euismod.Donec</p>
					<p>sed odio dui.</p>
					<img src="img/instagram_3.jpg"/>
					
					<p><a href="#">Dave Gamache:</a>Donec id elit non mi porta gravida at eget metus.Vivamus sagittis</p>
					<p><a href="#"></a>lacuc vel augue laoreet rutrum faucibus dolor.Donec ullamcorper nulla non</p>
					<p><a href="#"></a>metus auctor fringilla.Praesent commodo cursus magna,vel scelerisque nisl</p>
					<p><a href="#"></a>consectertur et.Sed posuere consectetur est at lobrtis.</p>
				</div>
			</div>
			
			
			
			<div class="txt3">
				<div class="txt3-top">
					<h5>sponsored</h5>
					<img src="img/instagram_2.jpg"/>
					<h6>It might be time to visit lceland.</h6>
					<p>lceland is so chill,and everything</p>
					<p>looks cool here.Also,we heard the</p>
					<p>people are pretty nice.What are you</p>
					<p>waiting for?</p>
					<a href="">Buy a ticket</a>
				</div>
				
				<div class="txt3-but">
					<h5>Likes</h5>
					<ul>
						<li>
							<i class="maoz"></i>
							<span>Jacob Thornton<a href="#"> @fat</a></span>
							<a href="" class="button-one">
								<i></i>
								Follow
							</a>
						</li>
					</ul>
					
					
					<ul>
						<li>
							<i class="maozi"></i>
							<span>Mark Otto<a href="#"> @mdo</a></span>
							<a href="" class="button-one">
								<i></i>
								Follow
							</a>
						</li>
					</ul>
					
					
				</div>
				<div class="txt3-one">
					<b class="dave">
						<p>Dave really likes these nerds,no one</p>
						<p>knows why though.</p>
					</b>
				</div>
			</div>
			</div>
			</div>
			<!--页脚-->
			<div class="footer">
				<div class="container">
					<div class="footer-one">
					<p>Designed and built with all the love in teh world by<a href="">@mdo,@fat,</a></a>and <a href="">@dhg.</a></a></p>
					<p>	
					<a href="#">About</a>
					<a href="#">Terms</a>
					<a href="#">Privacy</a>
					<a href="#">Licenses</a>
					<a href="#">FAQ</a>
					</p>
				</div>
				</div>
			</div>
	
	
</body>
</html>